<template>
  <div class="header_bos">
    <div class="back" @click="onBack">
      <el-icon color="#000000" size="18"><Back /></el-icon>
      <div>{{ returnText }}</div>
    </div>
    <div />
    <div
      v-for="(item, index) in headerData.type == 1 ? normal : headerData.list"
      :key="index"
      class="header_box"
      :class="{ grey: isGrey }"
      @click="goPath(item.url)"
    >
      <div class="title">{{ item.title }}</div>
      <el-icon color="#969CAD" size="12"><ArrowRight /></el-icon>
    </div>
    <div class="text">{{ headerData.title }}</div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import router from "@/router";

const normal = ref<any>([
  { title: "税务数字账户", url: "" },
  { title: "账户查询", url: "" },
  { title: "申报信息查询", url: "" },
]);

// API 引用
// import FileAPI from "@/api/file";

const props = defineProps({
  headerData: {
    type: Object,
    default: () => {},
  },
  isGrey: {
    type: Boolean,
    default: false,
  },
  returnText: {
    type: String,
    default: "返回",
  },
});
const emit = defineEmits(["update:modelValue"]);

//返回上一页
function onBack() {
  router.back();
}

//页面跳转
function goPath(url: any) {
  router.push(url);
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>

<style lang="scss" scoped>
.header_bos {
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  padding: 0 24px;
  background-color: #fff;

  .back {
    display: flex;
    align-items: center;
    margin-right: 20px;
    font-size: 20px;
    font-weight: 500;
    color: #000;
    cursor: pointer;

    :deep(.el-icon) {
      font-weight: 600;
    }
  }

  .header_box {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #4285f5;

    &.grey {
      color: rgb(0 0 0 / 40%);
    }

    .title {
      margin: 0 6px;
      cursor: pointer;
    }
  }

  .text {
    margin-left: 6px;
    font-size: 14px;
    color: #333;
  }
}
</style>
